<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./js/vue.js"></script>
    <style>
        body{background-color: aliceblue;}
        #app{width: 50%;
             background-color: #fff;
             border: 4px solid blueviolet;
             border-radius: 1em;
            box-shadow: 3px,3px,3px rgba(0, 0, 0, 0.5);
            padding: 2em;
        margin: 20px auto;}
        h3{text-align: center;}
        .title{
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid #ccc;
            padding: 0 1em;
        }
        .title h4{
            line-height: 2;
            margin: 0;
        }
    </style>
</head>
<body>
    <div id= "app">
        <h3>我爱的古诗词</h3>
        <div class="title">
            <h4>静夜思</h4>
            <span @click="click1()">
                {{isOK ? '收起':'展开'}}
            </span>
        </div>
        
        <div v-show="isOK">
            <p>窗前明月光</p>
            <p>疑是地上霜</p>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return{
                    isOK:false,
                }
            },
            methods:{
                click1() {
                    this.isOK = !this.isOK
                },
            }
        })
    </script>
</body>

</html>
